<script lang="ts" setup>
import {DownOutlined,CloseOutlined} from '@ant-design/icons-vue'
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const $store = useStore()
const router = useRouter()
// 添加子分类
$store.dispatch('menu/CHANGE_ROUTER')

let onClose = () => {
    $store.commit('menu/SET_OPEN_STATUS',false)
}

let switchHandler = (link:string) => {
    if(link == '/category') return
    router.push(link)
    onClose()
}

</script>

<template>
    <ul class="menu">
        <li class="menu-item" v-for="menu in $store.state.menu.menuList" :key="menu.link">
            <router-link class="menu-link" v-if="!menu?.childCates" :to="menu.link">{{menu.title}}</router-link>
            <a-dropdown v-if="menu?.childCates">
                <a style="height: 100%; display: flex; align-items: center;" class="ant-dropdown-link" @click.prevent>
                    <span>分类</span>
                <DownOutlined />
                </a>
                <template #overlay>
                <a-menu>
                    <a-menu-item v-for="(item) in menu?.childCates" :key="item.link">
                        <router-link class="menu-link" :to="item.link">{{item.title}}</router-link>
                    </a-menu-item>
                </a-menu>
                </template>
            </a-dropdown>
        </li>
    </ul>
    <a-drawer width="70%" :closable="false" placement="left" :open="$store.state.menu.isOpen" @close="onClose">
        <template #title>
            <a-button class="openMobiel" @click="onClose">
                <CloseOutlined />
            </a-button>
        </template>
        <p @click="switchHandler(menu.link)" v-for="menu in $store.state.menu.menuList" :key="menu.link">
            <a-collapse :key="menu.link" :header="menu.title" v-if="!menu?.childCates">
                {{ menu.title }}
            </a-collapse>
            <a-collapse v-else>
                <a-collapse-panel key="1" :header="menu.title">
                    <p v-for="secendMenu in menu?.childCates" @click="switchHandler(secendMenu.link)" :key="secendMenu.link">{{ secendMenu.title }}</p>
                </a-collapse-panel>
            </a-collapse>
        </p>
    </a-drawer>
</template>


<style lang="scss" scoped>
.menu {
    margin-bottom: 0px;
    height: 100%;
    list-style: none;
    display: flex;
    align-items: center;
    align-items: center;
    .menu-item {
        position: relative;
        cursor: pointer;
        height: 100%;
        padding: 0px 20px;
        display: flex;
        align-items: center;
        &:hover .menu-link{
                color: #0a5fe9;
            }
        .menu-link {
            line-height: 56px;
            height: 100%;
            color: #000;
        }
        .sub-menu {
            box-sizing: border-box;
            background: #fff;
            border-radius: 5px;
            padding: 0px 5px;
            box-shadow: 0px 0px 5px #ececec;
            position: absolute;
            top: 100%;
            height: auto;
            li {
                padding: 10px 10px;
                list-style: none;
            }
        }
    }
    ::v-deep .ant-dropdown-link{
        color: #000;
    }
}

.ant-drawer-body {
    padding: 0px !important;
}

 .ant-drawer {
    .ant-drawer-body {
    padding: 0px !important;
    .ant-collapse {
        padding: 24px;
        background-color: #fafafa;
        border-radius: 0px;
        border: none;
    }
    .ant-collapse>.ant-collapse-item >.ant-collapse-header {
        padding: 0px;
    }
      .ant-collapse .ant-collapse-content > .ant-collapse-content-box p {
        padding: 1rem 0px;
      }
}
}
::v-deep .ant-collapse>.ant-collapse-item >.ant-collapse-header {
    padding: 0px !important;
}
::v-deep .ant-collapse-item {
    border-bottom: none;
}

::v-deep .ant-collapse .ant-collapse-content {
    border-top: none;
}
::v-deep .ant-collapse-content-active {
    background-color: #fafafa;
}


::v-deep .ant-collapse .ant-collapse-content>.ant-collapse-content-box{
    padding: 24px;
    padding-bottom: 0px;
    p {
        color: #737373;
    }
    p:last-child {
        margin-bottom: 0px;
    }
}

::v-deep .ant-collapse .ant-collapse-content > .ant-collapse-content-box {
    background: #fafafa;
}
</style>
